<template>
  <view class="settings-container">
    <!-- 用户信息卡片 -->
    <view class="user-card">
      <view class="avatar-section">
        <u-avatar :src="userInfo.avatar" size="140"></u-avatar>
        <text class="username">{{ userInfo.name }}</text>
        <text class="user-role">{{ userInfo.role }}</text>
      </view>
    </view>

    <!-- 设置列表 -->
    <view class="settings-list">
      <!-- 个人信息设置 -->
      <view class="settings-group">
        <view class="group-title">个人信息</view>
        <u-cell-group>
          <u-cell title="个人资料" icon="account" isLink @click="handleClick('profile')"></u-cell>
          <u-cell title="实名认证" icon="file-text" isLink @click="handleClick('verify')"></u-cell>
        </u-cell-group>
      </view>

      <!-- 账号安全 -->
      <view class="settings-group">
        <view class="group-title">账号安全</view>
        <u-cell-group>
          <u-cell title="修改密码" icon="lock" isLink @click="handleClick('password')"></u-cell>
          <u-cell title="手机绑定" icon="phone" :value="userInfo.phone" isLink @click="handleClick('phone')"></u-cell>
        </u-cell-group>
      </view>

      <!-- 通知设置 -->
      <view class="settings-group">
        <view class="group-title">通知设置</view>
        <u-cell-group>
          <u-cell title="消息通知">
            <u-switch v-model="settings.notification" @change="handleNotificationChange"></u-switch>
          </u-cell>
          <u-cell title="声音">
            <u-switch v-model="settings.sound" @change="handleSoundChange"></u-switch>
          </u-cell>
        </u-cell-group>
      </view>

      <!-- 其他设置 -->
      <view class="settings-group">
        <view class="group-title">其他设置</view>
        <u-cell-group>
          <u-cell title="清除缓存" icon="trash" :value="cacheSize" @click="handleClearCache"></u-cell>
          <u-cell title="关于我们" icon="info-circle" isLink @click="handleClick('about')"></u-cell>
        </u-cell-group>
      </view>
    </view>

    <!-- 退出登录按钮 -->
    <view class="logout-section">
      <u-button type="error" @click="handleLogout">退出登录</u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        avatar: '',
        name: '张三',
        role: '质检员',
        phone: '138****8888'
      },
      settings: {
        notification: true,
        sound: true
      },
      cacheSize: '23.5MB'
    }
  },
  methods: {
    handleClick(type) {
      const routes = {
        profile: '/pages/settings/profile',
        verify: '/pages/settings/verify',
        password: '/pages/settings/password',
        phone: '/pages/settings/phone',
        about: '/pages/settings/about'
      }

      if (routes[type]) {
        uni.navigateTo({
          url: routes[type]
        })
      }
    },
    handleNotificationChange(value) {
      // 处理通知设置变更
      console.log('Notification changed:', value)
    },
    handleSoundChange(value) {
      // 处理声音设置变更
      console.log('Sound changed:', value)
    },
    async handleClearCache() {
      try {
        await this.$u.toast('清除缓存中...')
        // 实现清除缓存的逻辑
        this.cacheSize = '0KB'
        this.$u.toast('清除成功')
      } catch (error) {
        this.$u.toast('清除失败')
      }
    },
    async handleLogout() {
      try {
        await uni.showModal({
          title: '提示',
          content: '确定要退出登录吗？'
        })
        // 实现退出登录逻辑
        uni.reLaunch({
          url: '/pages/login/index'
        })
      } catch (error) {
        console.log('用户取消退出')
      }
    }
  }
}
</script>

<style>
.settings-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 40rpx;
}

.user-card {
  background-color: #fff;
  padding: 40rpx;
  margin-bottom: 20rpx;
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.username {
  font-size: 32rpx;
  font-weight: bold;
  margin-top: 20rpx;
}

.user-role {
  font-size: 24rpx;
  color: #666;
  margin-top: 10rpx;
}

.settings-group {
  margin-bottom: 20rpx;
}

.group-title {
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 30rpx;
}

.logout-section {
  margin: 40rpx 30rpx;
}
</style>
